<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body{
				height: 1300px;
			}
			.img{
				height: 300px;
				transition: all  1s;
				overflow: hidden;
			}
			img{
				width: 200px;
				/*height: 300px;*/
				
			}
			.btn{
				width: 40px;
				height: 20px;
				background: pink;
				text-align: center;
				border: 1px solid  #000;
				border-radius: 5px;
				cursor: pointer;
				float: left;
				margin: 5px 10px;
			}
			.btn2{
				width: 40px;
				height: 20px;
				background: pink;
				text-align: center;
				border: 1px solid  #000;
				border-radius: 5px;
				cursor: pointer;
				float: left;
				margin: 5px 10px;
			}
			.btn3{
				width: 40px;
				height: 20px;
				background: pink;
				text-align: center;
				border: 1px solid  #000;
				border-radius: 5px;
				cursor: pointer;
				float: left;
				margin: 5px 10px;
			}			
			.up{
				height: 0px;
				overflow: hidden;				
			}
			.top{
				width: 50px;
				height: 40px;
				background: palevioletred;
				position: fixed;
				top: 600px;
				left: 0;
				color: #fff;
				font-size: 20px;
				text-align: center;
				padding-top: 15px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div class="img"><img src="img/timg.jpg"/></div>
		<div class="btn">收起</div>
		<div class="btn2">展开</div>
		<div class="btn3">切换</div>
		<div class="top">TOP</div>
		<script type="text/javascript">
			var imgClass = document.querySelector(".img");
			var btnClass = document.querySelector(".btn");
			var btn2Class = document.querySelector(".btn2");
			var btn3Class = document.querySelector(".btn3");
			btnClass.addEventListener("click",function(){
					imgClass.classList.add("up");
			});
			btn2Class.addEventListener("click",function(){
					imgClass.classList.remove("up");
			});
			btn3Class.addEventListener("click",function(){
					imgClass.classList.toggle("up");
			});
			
			var top = document.getElementsByClassName("top");
			
				
			top.addEventListener("click",function(){
			setInterval(function(){
					var top2 = window.pageYOffset;
					top2 -= 100;
					window.scrollTo(0,top2);
				},40);
			});
		</script>
	</body>
</html>
